<template>
    <el-menu active-text-color="rgb(64, 158, 255)" background-color="#304156" class="el-menu-vertical-demo"
        :class="{ 'el-menu--collapse': isCollapse }" :default-active="defUrl" text-color="#fff" :collapse="isCollapse"
        router unique-opened>
        <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <span>首页</span></el-menu-item>
        <el-sub-menu :index="'/' + p.name" v-for="p in menus" :key="p.id">
            <template #title>
                <i class="iconfont" :class="p.icon"></i>
                <span>{{ p.title }}</span>
            </template>
            <template v-for="sub in p.children" :key="sub.id">
                <el-menu-item :index="'/' + p.name + '/' + sub.name" v-if="sub.hidden === 0">
                    <i class="iconfont" :class="sub.icon"></i>
                    {{ sub.title }}
                </el-menu-item>
            </template>
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang='ts'>
import { inject, ref, watch } from 'vue'
import { useUserStore } from "@/store/user";
import { useRoute } from 'vue-router'
const userStore = useUserStore();
const isCollapse = inject('isCollapse')
const menus = userStore.routers
// 菜单的默认展开数据
const defUrl = ref("/index")
const route = useRoute()
watch(() => route.path,
    () => {
        console.log("aaaaaaaaaaaaaaaa");

        defUrl.value = route.path
    },
    {
        immediate: true,
    }
)
</script>
 
<style lang = "less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
}
</style>